<template>
  <div class="login-register">
    <div class="contain">
      <div class="big-box" :class="{active:isLogin}">
        <div class="big-contain" key="bigContainLogin" v-if="isLogin">
          <div class="btitle">账户登录</div>
          <div class="hintBarr">
            <div class="hinton" id="accountLogin" @click="changeLoginStatue1">账号密码登录</div>
            <div class="hintoff" id="phoneLogin" @click="changeLoginStatue2">手机验证码登录</div>
          </div>
          <div class="bform">
            <div class="bform1" v-if="LoginMethod">
              <input type="text" placeholder="账号" v-model="form.username"></input>
              <!--            <span class="errTips" v-if="emailError">* 电话填写错误 *</span>-->
              <input type="password" placeholder="密码" v-model="form.userpwd"></input>
              <span class="errTips" v-if="passwordError">* 密码填写错误 *</span>
            </div>
            <div class="bform1" v-else>
              <input type="text" placeholder="电话号码" v-model="form.usertelnumber">
              <div class="box">
                <input type="text" placeholder="短信验证码" v-model="form.verification" style="width: 215px"></input>
                <button class="el-button" ref="yzbutton" style="margin-left: 10px" @click="sendCode">获取验证码{{ num }}</button>
              </div>
            </div>
            <div class="my-4 flex items-center text-sm">
              <el-radio-group v-model="loginwho">
                <el-radio :label="0">管理员</el-radio>
                <el-radio :label="1">答者</el-radio>
                <el-radio :label="2">用户</el-radio>
                <el-radio :label="3">租户</el-radio>
              </el-radio-group>
            </div>
            <button class="bbutton" @click="login">登录</button>
          </div>
          <div style="font-size: 14px">
            <a href="#/fandpassword">忘记密码？点击找回</a>
          </div>
        </div>

        <div class="big-contain" key="bigContainRegister" v-else>
          <div class="btitle">创建账户</div>
          <div class="hintBarr">
            <div class="hinton" id="answerStatue" @click="changeRegisterStatue1" >
              答者注册
            </div>
            <div class="hintoff" id="userStatue" @click="changeRegisterStatue2">用户注册</div>
            <div class="hintoff" id="tenenmentStatue" @click="changeRegisterStatue3"  >租户注册</div>
          </div>
          <!--          答者注册-->
          <div class="bform" id="dazhe" v-if="registeMethod1">
            <input type="text" placeholder="账号" v-model="form.username">
            <span class="errTips" v-if="existed">* 账号已经存在！ *</span>
            <input type="password" placeholder="密码" v-model="form.userpwd">
            <input type="text" placeholder="设置密保问题" v-model="form.question">
            <input type="text" placeholder="设置密保答案" v-model="form.answer">
            <input type="tel" placeholder="电话号码" v-model="form.usertelnumber">
            <div class="box1">
              <div class="box">
                <input type="text" placeholder="短信验证码" v-model="form.verification" style="width: 290px;"></input>
                <button class="el-button" ref="yzbutton" style="margin-left: 10px" @click="sendCode">获取验证码{{ num }}</button>
              </div>
              <span class="errTips" v-if="verificationerror">*验证码错误！*</span>
            </div>
          </div>
          <!--          用户注册-->
          <div class="bform" id="yonghu" v-if="registeMethod2">
            <input type="text" placeholder="账号" v-model="form.username">
            <span class="errTips" v-if="existed">* 账号已经存在！ *</span>
            <input type="password" placeholder="密码" v-model="form.userpwd">
            <input type="text" placeholder="设置密保问题" v-model="form.question">
            <input type="text" placeholder="设置密保答案" v-model="form.answer">
            <input type="text" placeholder="所属租户名称" v-model="form.TenementName">
            <input type="tel" placeholder="电话号码" v-model="form.usertelnumber">
            <div class="box1">
              <div class="box">
                <input type="text" placeholder="短信验证码" v-model="form.verification" style="width: 290px;"></input>
                <button class="el-button" ref="yzbutton" style="margin-left: 10px" @click="sendCode">获取验证码{{ num }}</button>
              </div>
              <span class="errTips" v-if="verificationerror">* 验证码错误！ *</span>
            </div>
          </div>
          <!--          租户注册-->
          <div class="bform" id="zuhu" v-if="registeMethod3">
            <input type="text" placeholder="账号" v-model="form.username">
            <span class="errTips" v-if="existed">* 账号已经存在！ *</span>
            <input type="password" placeholder="密码" v-model="form.userpwd">
            <input type="text" placeholder="设置密保问题" v-model="form.question">
            <input type="text" placeholder="设置密保答案" v-model="form.answer">
            <input type="tel" placeholder="电话号码" v-model="form.usertelnumber"></input>
            <div class="box1">
              <div class="box">
                <input type="text" placeholder="短信验证码" v-model="form.verification" style="width: 290px;"></input>
                <button class="el-button" ref="yzbutton" style="margin-left: 10px" @click="sendCode">获取验证码{{ num }}</button>
              </div>
              <span class="errTips" v-if="verificationerror">*验证码错误！*</span>
            </div>
          </div>
          <button class="bbutton" @click="Register">注册</button>
        </div>
      </div>
      <div class="small-box" :class="{active:isLogin}">
        <div class="small-contain" key="smallContainRegister" v-if="isLogin">
          <div class="stitle">你好，朋友!</div>
          <p class="scontent">开始注册，和我们一起问卷之旅</p>
          <button class="sbutton" @click="changeToRegister">注册</button>
        </div>
        <div class="small-contain" key="smallContainLogin" v-else>
          <div class="stitle">欢迎回来!</div>
          <p class="scontent">使用问卷系统，请登录你的账户</p>
          <button class="sbutton" @click="changeToLogin">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  loginSmsUser,
  loginBySmsUser,
  registeUser,
  loginSmsAnswerer,
  registersmsUser,
  registerAnswerer,
  registersmsAnswerer,
  loginByPwdAnswerer,
  loginBySmsAnswerer, registersmsTenement, loginByPwdTenement, loginSmsTenement, loginBySmsTenement, registerTenement,
  loginBySmsAdmin, loginByPwdAdmin, loginSmsAdmin, loginByPwdUser
} from "../../api/loginRegist";

export default {
  name: 'login',


  data() {
    return {
      //登录者的id
      loginerId:'',
      //登录方式，如果为true为账号密码登录，false为验证码登录
      LoginMethod: true,
      //注册方式，为true表示答者注册,用来控制页面的显示
      registeMethod1: true,
      registeMethod2: false,
      registeMethod3: false,
      clearable: true,
      //为true表示正在登录，用来控制页面显示
      isLogin: true,
      telError: false,
      passwordError: false,
      existed: false,
      verificationerror: false,
      //验证码倒计时
      num: "",
      //表示登录角色 0为admin 1为答者 2为用户 3为租户
      loginwho: 0,
      //表示注册角色 1为答者 2为用户 3为租户
      registerWho: 1,
      form: {
        username: '',
        usertelnumber: '',
        userpwd: '',
        verification: '',
        TenementName: '',
        question: '',
        answer: ''
        // choose: ''
      },

    }

  },
  methods: {
    changeLoginStatue1() {
      this.LoginMethod = true
      document.getElementById("accountLogin").className = "hinton"
      document.getElementById("phoneLogin").className = "hintoff"
    },
    changeLoginStatue2() {
      this.LoginMethod = false
      document.getElementById("accountLogin").className = "hintoff"
      document.getElementById("phoneLogin").className = "hinton"
    },
    //注册状态更改
    changeRegisterStatue1() {
      this.registerWho = 1
      this.registeMethod1 = true
      this.registeMethod2 = false
      this.registeMethod3 = false

      document.getElementById("answerStatue").className = "hinton"
      document.getElementById("userStatue").className = "hintoff"
      document.getElementById("tenenmentStatue").className = "hintoff"

    },
    changeRegisterStatue2() {
      console.log("点击用户注册")
      this.registerWho = 2
      this.registeMethod1 = false
      this.registeMethod2 = true
      this.registeMethod3 = false
      document.getElementById("answerStatue").className = "hintoff"
      document.getElementById("userStatue").className = "hinton"
      document.getElementById("tenenmentStatue").className = "hintoff"
      console.log("用户注册状态" + this.registeMethod2)
      console.log("其他状态" + this.registeMethod1)
      console.log("其他状态" + this.registeMethod3)

    },
    changeRegisterStatue3() {
      this.registerWho = 3
      this.registeMethod1 = false
      this.registeMethod2 = false
      this.registeMethod3 = true
      document.getElementById("answerStatue").className = "hintoff"
      document.getElementById("userStatue").className = "hintoff"
      document.getElementById("tenenmentStatue").className = "hinton"

    },

    changeToLogin() {

      this.isLogin = true
      this.LoginMethod = true
      this.loginwho = 0

      this.form.username = ''
      this.form.usertelnumber = ''
      this.form.userpwd = ''
      this.form.verification = ''


      document.getElementById("phoneLogin").className="hintoff"
    },
    changeToRegister() {

      this.isLogin = false
      this.registeMethod1 = true
      this.registeMethod2 = false
      this.registeMethod3 = false

      this.registerWho = 1
      this.form.username = ''
      this.form.usertelnumber = ''
      this.form.userpwd = ''
      this.form.verification = ''
      document.getElementById("tenenmentStatue").className="hintoff"
      document.getElementById("userStatue").className="hintoff"

    },
    //点击发送验证码的触发函数
    async sendCode() {
      console.log("点击验证码按钮一次")
      let tel = this.form.usertelnumber;
      if (!tel) {
        this.$message.warning("请输入手机号码")
        return
      }
      if (!/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/.test(tel)) {
        this.$message.warning("请输入正确格式的手机号")
        return
      }
      this.$refs.yzbutton.setAttribute('disabled', true)
      this.$refs.yzbutton.setAttribute('cursor', 'not-allowed')
      this.num = 10
      let num = setInterval(() => {
        this.num -= 1
        if (this.num < 1) {
          clearInterval(num)
          this.$refs.yzbutton.removeAttribute('disabled')
          this.num = ""
        }
      }, 1000)
      //发送得到验证码请求
      if (this.isLogin) {
        if (this.LoginMethod) {
          //账号密码登录的情况，无需发送信息
        } else {
          if (this.loginwho == 0) {
            loginSmsAdmin(this.form.usertelnumber).then((response) => {
              console.log(response.data)
              if (response.data.code == 200) {

                this.$message.success(response.data.message)
              } else {
                this.$message.error(response.data.message)
              }
            })
          }
          if (this.loginwho == 1) {
            loginSmsAnswerer(this.form.usertelnumber).then((response) => {
              console.log(response.data)
              if (response.data.code == 200) {
                this.$message.success(response.data.message)
              } else {
                this.$message.error(response.data.message)
              }
            })
          }
          if (this.loginwho == 2) {
            loginSmsUser(this.form.usertelnumber).then((response) => {
              console.log("验证码登录")
              console.log(response)
              if (response.data.code == 200) {
                this.$message.success(response.data.message)
              } else {
                this.$message.error(response.data.message)
              }
            });
          }
          if (this.loginwho == 3) {
            loginSmsTenement(this.form.usertelnumber).then((response) => {
              console.log("验证码登录")
              console.log(response)
              if (response.data.code == 200) {
                this.$message.success(response.data.message)
              } else {
                this.$message.error(response.data.message)
              }
            });

          }
        }
      }
      //注册
      else {
        if (this.registerWho == 1) {
          registersmsAnswerer(tel).then((response) => {
            console.log("验证码注册")
            console.log(response)
            if (response.data.code == 200) {
              this.$message.success(response.data.message)
            } else {
              this.$message.warning(response.data.message)
            }
          })
        }
        if (this.registerWho == 2) {
          registersmsUser(tel).then((response) => {
            console.log("验证码注册")
            console.log(response)
            if (response.data.code == 200) {
              this.$message.success(response.data.message)
            } else {
              this.$message.warning(response.data.message)
            }
          })
        }
        if (this.registerWho == 3) {
          //租户注册时发信息
          registersmsTenement(tel).then((response) => {
            console.log("验证码注册")
            console.log(response)
            if (response.data.code == 200) {
              this.$message.success(response.data.message)
            } else {
              this.$message.warning(response.data.message)
            }
          })
        }
      }
    },

    //登录
    login() {

      const data = {
        username: this.form.username,
        password: this.form.userpwd
      }
      if (this.LoginMethod) {
        console.log("到底有没有信息")
        console.log(this.form.username)
        console.log(this.form.username != "")
        if (this.loginwho == 0) {
          if (this.form.username != "" && this.form.userpwd != "") {
            loginByPwdAdmin(data.username, data.password).then((response) => {
              console.log(response)
              if (response.data.code == 200) {
                // this.$message.success(response.data.message)
                //跳转到主页
                this.$router.push({path: '/admin'})
                const loginerInfo = response.data.data
                window.sessionStorage.setItem('data', JSON.stringify(loginerInfo))
              }
              else{
                this.$message.warning(response.data.message)
              }
            })
              .catch(err => {
                console.log(err);
              })
          } else {
            this.$message.warning("账号密码不能为空")
          }

        }
        if (this.loginwho == 1) {
          if (this.form.username != "" && this.form.userpwd != "") {
            loginByPwdAnswerer(data.username, data.password).then((response) => {
              console.log("用户账号密码登录")
              console.log(response)
              if (response.data.code == 200) {
                // this.$message.success(response.data.message)
                //跳转到主页
                this.$router.push({path: '/answerer'})
                const loginerInfo = response.data.data
                window.sessionStorage.setItem('data', JSON.stringify(loginerInfo))
              }
              else{
                this.$message.warning(response.data.message)
              }

            })
              .catch(err => {
                console.log(err);
              })
          } else {
            this.$message.warning("账号密码不能为空")
          }
        }
        if (this.loginwho == 2) {
          if (this.form.username != "" && this.form.userpwd != "") {
            loginByPwdUser(data.username, data.password).then((response) => {
              console.log(response)
              if (response.data.code == 200) {
                // this.$message.success(response.data.message)
                //跳转到主页
                this.$router.push({path: '/user'})
                const loginerInfo = response.data.data
                window.sessionStorage.setItem('data', JSON.stringify(loginerInfo))
              }
             else{
                this.$message.warning(response.data.message)
              }

            })
              .catch(err => {
                console.log(err);
              })
          } else {
            this.$message.warning("账号密码不能为空")
          }

        }
        if (this.loginwho == 3) {
          if (this.form.username != "" && this.form.userpwd != "") {
            loginByPwdTenement(data.username, data.password).then((response) => {
              console.log(response)
              if (response.data.code == 200) {
                // this.$message.success(response.data.message)
                //跳转到主页
                this.$router.push({path: '/tenant'})
                const loginerInfo = response.data.data
                window.sessionStorage.setItem('data', JSON.stringify(loginerInfo))
              }
             else{
                this.$message.warning(response.data.message)
              }
            })
              .catch(err => {
                console.log(err);
              })
          } else {
            this.$message.warning("账号密码不能为空")
          }
        }
      }

      const phonecode = {
        telnumber: this.form.usertelnumber,
        code: this.form.verification
      }
      if (!this.LoginMethod) {

        if (this.loginwho == 0) {
          if (this.form.usertelnumber != "" && this.form.verification != "") {
            loginBySmsAdmin(this.form.usertelnumber, this.form.verification).then((response) => {
              console.log("手机验证码登录admin")
              console.log(phonecode)
              console.log(response)
              if (response.data.code == 200) {

                // this.$message.success(response.data.message)
                //主页跳转
                this.$router.push({path: '/admin'})
                const loginerInfo = response.data.data
                window.sessionStorage.setItem('data', JSON.stringify(loginerInfo))
              } else {
                this.$message.warning(response.data.message)
              }

            }).catch(err => {
              console.log(err);
            })
          } else {
            this.$message.warning("请输入手机号和验证码")
          }

        }
        if (this.loginwho == 1) {
          if (this.form.usertelnumber != "" && this.form.verification != "") {
            loginBySmsAnswerer(this.form.usertelnumber, this.form.verification).then((response) => {
              console.log("手机验证码登录user")
              console.log(phonecode)
              console.log(response)
              if (response.data.code == 200) {
                // this.$message.success(response.data.message)
                //主页跳转
                this.$router.push({path: '/answerer'})
                const loginerInfo = response.data.data
                window.sessionStorage.setItem('data', JSON.stringify(loginerInfo))
              } else {
                this.$message.warning(response.data.message)
              }

            }).catch(err => {
              console.log(err);
            })
          } else {
            this.$message.warning("请输入手机号和验证码")
          }
        }
        if (this.loginwho == 2) {
          if (this.form.usertelnumber != "" && this.form.verification != "") {
            loginBySmsUser(phonecode.telnumber, phonecode.code).then((response) => {
              console.log("手机验证码登录Answer")
              console.log(phonecode)
              console.log(response)
              if (response.data.code == 200) {
                // this.$message.success(response.data.message)
                //主页跳转
                this.$router.push({path: '/user'})
                const loginerInfo = response.data.data
                window.sessionStorage.setItem('data', JSON.stringify(loginerInfo))
              } else {
                this.$message.warning(response.data.message)
              }

            }).catch(err => {
              console.log(err);
            })
          } else {
            this.$message.warning("请输入手机号和验证码")
          }
        }
        if (this.loginwho == 3) {
          if (this.form.usertelnumber != "" && this.form.verification != "") {
            loginBySmsTenement(phonecode.telnumber, phonecode.code).then((response) => {
              console.log("手机验证码登录租户")
              console.log(phonecode)
              console.log(response)
              if (response.data.code == 200) {

                // this.$message.success(response.data.message)
                //主页跳转
                this.$router.push({path: '/tenant'})
                const loginerInfo = response.data.data
                window.sessionStorage.setItem('data', JSON.stringify(loginerInfo))
              } else {
                this.$message.warning(response.data.message)
              }

            }).catch(err => {
              console.log(err);
            })
          } else {
            this.$message.warning("请输入手机号和验证码")
          }
        }
      }
    },


    //注册
    Register() {
      console.log("注册点击按钮")
      const Answer = {
        username: this.form.username,
        password: this.form.userpwd,
        telnumber: this.form.usertelnumber,
        str: this.form.verification,
        securityQuestionAnswer: this.form.answer,
        securityQuestionContext: this.form.question
      }
      console.log(Answer)

      if (this.registerWho == 1) {
        if (this.form.username !== "" && this.form.usertelnumber != "" && this.form.userpwd != ""&& this.form.answer!=""&&this.form.question!="") {
          registerAnswerer(Answer.username, Answer.telnumber, Answer.str, Answer.password,
            Answer.securityQuestionAnswer, Answer.securityQuestionContext, this.form.TenementName).then((response) => {
            console.log("答者注册")
            console.log(response)
            if (response.data.code == 200) {
              // this.$message.success(response.data.message)
              //跳转界面
              this.$router.push({path: '/answerer'})
              const loginerInfo = response.data.data
              window.sessionStorage.setItem('data', JSON.stringify(loginerInfo))
            } else {
              this.$message.error(response.data.message)
            }

          }).catch(err => {
            console.log(err);
          })
        } else {
          this.$message.warning("请将表单填写完整！")
        }
      }
      const us = {
        username: this.form.username,
        password: this.form.userpwd,
        telnumber: this.form.usertelnumber,
        str: this.form.verification,
        securityQuestionAnswer: this.form.answer,
        securityQuestionContext: this.form.question,
        tenanmentName:this.form.TenementName
      }
      if (this.registerWho == 2) {
        if (this.form.username != "" && this.form.usertelnumber != "" && this.form.userpwd != "" && this.form.TenementName != ""&& this.form.answer!=""&&this.form.question!="") {
          registeUser(us.username, us.telnumber, us.str, us.password, us.securityQuestionAnswer, us.securityQuestionContext, this.form.TenementName).then((response) => {
            console.log("用户注册")
            console.log(response)
            if (response.data.code == 200) {
              // this.$message.success(response.data.message)
              //跳转
              this.$router.push({path: '/user'})
            } else {
              this.$message.error(response.data.message)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.$message.warning("请将表单填写完整！")
        }
      }
      if (this.registerWho == 3) {
        if (this.form.username != "" && this.form.usertelnumber != "" && this.form.userpwd != ""&& this.form.answer!=""&&this.form.question!="") {
          registerTenement(us.username, us.telnumber, us.str, us.password, us.securityQuestionAnswer, us.securityQuestionContext, this.form.TenementName).then((response) => {
            console.log("租户注册")
            console.log(response)
            if (response.data.code == 200) {
              // this.$message.success(response.data.message)
              //跳转
              this.$router.push({path: '/tenant'})

            } else {
              this.$message.error(response.data.message)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.$message.warning("请将表单填写完整！")
        }
      }

    }
    ,
  },

  // 页面开始就加载相关选项
  created() {

  }
}
</script>

<style scoped="scoped">
.el-button {
  height: 30px;
  /*text-align: justify-all;*/
}

.hintBarr {
  display: flex;
  flex-direction: row;
  align-content: space-around;
  padding: 5px;
}

.hintBarr .hinton {
  font-size: 14px;
  cursor: pointer;
  color: #7EA2C1;
  text-decoration: underline;
  margin-left: 5px;
  margin-right: 5px;
}
.hintBarr .hintoff {
  font-size: 14px;
  cursor: pointer;

  margin-left: 5px;
  margin-right: 5px;
}

.box1 {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.box {

  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-content: space-around;
  align-items: center;

}

.login-register {
  background-image: url("../../assets/background.jpg");
  background-size: 100% 100%;
  margin: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.contain {
  width: 67%;
  height: 70%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 3px #f0f0f0,
  0 0 6px #f0f0f0;
}

.big-box {
  width: 70%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 30%;
  transform: translateX(0%);
  transition: all 1s;
}

.big-contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: space-around;
}

.btitle {
  font-size: 1.5em;
  font-weight: bold;
  color: rgb(81, 133, 206);
}

.bform {
  width: 100%;
  height: 50%;
  margin-top: 5px;
  padding: 2em 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.bform1 {
  width: 100%;
  height: 40%;
  padding: 2px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.bform .errTips {
  display: block;
  width: 50%;
  text-align: left;
  color: red;
  font-size: 0.7em;
  margin-left: 1em;
}

.bform input {
  width: 50%;
  height: 30px;
  border: none;
  outline: none;
  border-radius: 10px;
  margin-top: 4px;
  padding-left: 2em;
  background-color: #f0f0f0;
}



.bbutton {
  width: 20%;
  height: 40px;
  border-radius: 24px;
  border: none;
  outline: none;
  background-color: rgb(81, 133, 206);
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
}
.bbutton:hover{
  box-shadow: 0px 3px 3px 0px rgb(36, 59, 97);
}


.small-box {
  width: 30%;
  height: 100%;
  background: linear-gradient(135deg, rgb(127, 193, 212), rgb(81, 132, 200));
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0%);
  transition: all 1s;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.small-contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stitle {
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
}

.scontent {
  font-size: 0.8em;
  color: #fff;
  text-align: center;
  padding: 2em 4em;
  line-height: 1.7em;
}

.sbutton {
  width: 60%;
  height: 40px;
  border-radius: 24px;
  border: 1px solid #fff;
  outline: none;
  background-color: transparent;
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
}
.sbutton:hover {
  box-shadow: 0px 3px 3px 0px #1e3d61;
}

.big-box.active {
  left: 0;
  transition: all 0.5s;
}

.small-box.active {
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transform: translateX(-100%);
  transition: all 1s;
}
</style>
